<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="right" :stretch="false">
      <el-tab-pane :label="$t('触达任务列表')" name="touchList">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("触达任务列表") }}</span>
          </div>
          <div>
            <touch-list ref="touchListRef" @create="createTouchTask" @edit="editTouchTask"></touch-list></div
        ></el-card>
      </el-tab-pane>
      <el-tab-pane v-if="tabProp.showProp.createDcTouch" :label="$t('新增触达任务')" name="createDcTouch">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ `${$t("新建DC触达")}` }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="
                tabProp.showProp.createDcTouch = false;
                activeName = 'touchList';
              "
              >{{ $t("关闭标签页") }}</el-button
            >
          </div>
          <div class="touchCreate">
            <touch-dc @flushList="flushList"></touch-dc>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane v-if="tabProp.showProp.createEmailTouch" :label="$t('新增触达任务')" name="createEmailTouch">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("新建邮件触达") }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="
                tabProp.showProp.createEmailTouch = false;
                activeName = 'touchList';
              "
              >{{ $t("关闭标签页") }}</el-button
            >
          </div>
          <div class="touchCreate">
            <touch-email @flushList="flushList"></touch-email>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane v-if="tabProp.showProp.editDcTouch" :label="$t('编辑触达任务')" name="editDcTouch">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("编辑DC触达") }}</span>
            <span style="font-size: 10px"> ID:{{ touchId }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="
                tabProp.showProp.editDcTouch = false;
                activeName = 'touchList';
              "
              >{{ $t("关闭标签页") }}</el-button
            >
          </div>
          <div class="touchEdit">
            <touch-dc @flushList="flushList" :touchId="touchId"></touch-dc>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane v-if="tabProp.showProp.editEmailTouch" :label="$t('编辑触达任务')" name="editEmailTouch">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ $t("编辑邮件触达") }}</span>
            <span style="font-size: 10px"> ID:{{ touchId }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="
                tabProp.showProp.editEmailTouch = false;
                activeName = 'touchList';
              "
              >{{ $t("关闭标签页") }}</el-button
            >
          </div>
          <div class="touchEdit">
            <touch-email @flushList="flushList" :touchId="touchId"></touch-email>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TouchList from "views/touch/index";
import TouchDc from "views/touch/touchDc";
import TouchEmail from "views/touch/touchEmail";

export default {
  components: { TouchList, TouchDc, TouchEmail },
  props: {},
  data() {
    return {
      touchId: 0,
      activeName: "touchTaskList",
      tabProp: {
        showProp: {},
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(tab) {
      console.log(tab.name);
    },
    flushList({ type, id }) {
      console.log(type, id);
      this.$refs.touchListRef.initPage();
      this.afterFlush(type);
    },
    afterFlush(type) {
      this.activeName = "touchList";
      if (type == "create") {
        this.tabProp.showProp.createDcTouch = false;
        this.tabProp.showProp.createEmailTouch = false;
      } else {
        this.tabProp.showProp.editDcTouch = false;
        this.tabProp.showProp.editEmailTouch = false;
      }
    },

    createTouchTask(type) {
      //   console.log(type);
      this.activeCreateTab(type);
      window.scrollTo(0, 0);
    },

    activeCreateTab(type) {
      if (type == "d-chat") {
        this.tabProp.showProp.createDcTouch = true;
        this.tabProp.showProp.createEmailTouch = false;
        this.activeName = "createDcTouch";
      } else {
        this.tabProp.showProp.createDcTouch = false;
        this.tabProp.showProp.createEmailTouch = true;
        this.activeName = "createEmailTouch";
      }
    },
    editTouchTask(row) {
      //   window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
      //   console.log(row);
      this.activeEditTab(row);
      window.scrollTo(0, 0);
    },
    activeEditTab({ id, msgChannel }) {
      this.touchId = id;
      if (msgChannel == 1) {
        this.tabProp.showProp.editDcTouch = true;
        this.tabProp.showProp.editEmailTouch = false;
        this.activeName = "editDcTouch";
      } else {
        this.tabProp.showProp.editDcTouch = false;
        this.tabProp.showProp.editEmailTouch = true;
        this.activeName = "editEmailTouch";
      }
    },
  },
  created() {},
  mounted() {
    this.activeName = this.$route.name;
    // this.activeName = "createDcTouch";
    // this.tabProp.showProp.createDcTouch = true;
  },
};
</script>
<style lang="scss" scoped></style>
